<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router'
const router = useRouter();
const user = JSON.parse(localStorage.getItem('user') as string);
const data = ref([
    {
        time: '4月',
        timeDay: '4-28',
        title: '预计明天开盘啦啦啦...',
        img: ['https://img1.baidu.com/it/u=2578525278,2681164481&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1701709200&t=1574cf507760cb68eaa8f9ed51d86840']
    },
    {
        time: '4月',
        timeDay: '4-27',
        title: '预计后天天开盘啦啦啦...',
        img: [
            'https://img1.baidu.com/it/u=2578525278,2681164481&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1701709200&t=1574cf507760cb68eaa8f9ed51d86840',
            'https://img2.baidu.com/it/u=3213874460,1701516957&fm=253&fmt=auto&app=138&f=JPEG?w=771&h=500',
            'https://img1.baidu.com/it/u=1473732890,2854292618&fm=253&fmt=auto&app=138&f=JPEG?w=947&h=500',
        ]
    },
    {
        time: '4月',
        timeDay: '4-26',
        title: '嘿嘿嘿预计4-28开盘啦啦啦...',
        img: ['https://img1.baidu.com/it/u=2578525278,2681164481&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1701709200&t=1574cf507760cb68eaa8f9ed51d86840']
    },
    {
        time: '4月',
        timeDay: '4-25',
        title: '嘟嘟嘟预计4-28开盘啦啦啦...',
        img: [
            'https://img1.baidu.com/it/u=2578525278,2681164481&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1701709200&t=1574cf507760cb68eaa8f9ed51d86840',
            'https://img1.baidu.com/it/u=728375973,1036320993&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334',
        ]
    },
    {
        time: '4月',
        timeDay: '4-24',
        title: '啦啦啦预计4-28开盘啦啦啦...',
        img: ['https://img1.baidu.com/it/u=2175064489,1699928871&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500']
    },
])
const route = useRoute();
onMounted(() => {
    const title: any = route.query.title;
    if (title) {
        data.value.unshift({
            time: '4月',
            timeDay: '4-29',
            title: title,
            img: ['https://img1.baidu.com/it/u=2578525278,2681164481&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1701709200&t=1574cf507760cb68eaa8f9ed51d86840']
        })
    }
})
// 导航回退
const onClickLeft = () => {
    router.push('/home')
}
// 图片预览
const onImg = (url: string) => {
    location.href = url
}
// 新增
const onClick = () => {
    router.push({ path: '/circle/add' })
};
</script>

<template>
    <div class="box">
        <header>
            <van-icon name="arrow-left" class="icon" @click="onClickLeft" />
            楼市圈
        </header>
        <main>
            <van-floating-bubble icon="plus" @click="onClick" />
            <div class="nei" v-for="(item, index) in data" :key="item.time">
                <div class="top">
                    <img src="https://img1.baidu.com/it/u=2738614934,4015134810&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1701709200&t=6633ba305b579245e8325b29694f2785"
                        alt="">
                    {{ user?.name }}
                </div>
                <div class="item">
                    <div class="left">
                        <h4>{{ item.time }}</h4>
                        <p>{{ item.timeDay }}</p>
                    </div>
                    <div class="right">
                        <p>{{ item.title }}</p>
                        <div class="tu">
                            <img v-for="(i, j) in item.img" :key="j" :style="{ width: 100 / item.img.length + '%' }"
                                :src="i" @click="onImg(i)" />
                        </div>
                    </div>
                </div>
            </div>
            <p class="dibu">没有更多了&emsp;o(╥﹏╥)o</p>
        </main>
    </div>
</template>

<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
}

.box {
    width: 100vw;
    height: 100vh;
    overflow: hidden;


    header {
        width: 100vw;
        height: 50px;
        background-color: #2391f9;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        position: relative;

        .icon {
            position: absolute;
            top: 50%;
            left: 10%;
            transform: translate(-50%, -50%);
        }
    }

    main {
        width: 100%;
        height: calc(100% - 50px);
        overflow: auto;

        .dibu {
            text-align: center;
            padding: 5px;
            margin: 5px 100px;
            font-size: 12px;
            color: #ccc;
        }

        .nei {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            margin-top: 10px;
        }

        .top {
            width: 100%;
            height: 50px;
            padding: 0 10px;
            box-sizing: border-box;
            font-weight: bold;

            img {
                width: 50px;
                border-radius: 50%;
                vertical-align: middle;
                margin-right: 5px;
            }
        }

        .item {
            width: 100%;
            // height: 200px;
            display: flex;
            margin-top: 10px;
            background: #fcfcfc;
            box-shadow: 0 0 2px 2px #fcfcfc;
            border-radius: 10px;

            .left {
                width: 20%;
                height: 100%;
                line-height: 25px;
                text-align: center;
            }

            .right {
                width: 80%;
                height: 100%;

                .tu {
                    max-width: 100%;
                    display: flex;
                }

                img {
                    margin: 10px 1px;
                    border-radius: 10px;
                }

            }
        }
    }
}
</style>